<!-- cj -->
<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <head th:include="/utils/common_css :: commonCss"></head>
    <link th:href="@{/static/css/data_table.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/form/form-tree.css}" rel="stylesheet" type="text/css"/>
</head>
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
<div class="m-grid m-grid--hor m-grid--root m-page">
    <div th:replace="/utils/header :: header"></div>
    <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
        <div th:replace="/utils/left_menu :: leftMenu"></div>
        <div class="cj-main">
            <div class="cj-main-header">
                <ul>
                    <li class="icon">
                        <i class="m-nav__link-icon la la-home"></i>
                    </li>
                    <li>
                        <a class="decoration">系统设置</a>
                    </li>
                    <li>
                        <a class="decoration" href="/admin/sys/role">角色信息展示</a>
                    </li>
                    <li>
                        <a class="decoration" href="/admin/sys/role/add">添加新角色</a>
                    </li>
                </ul>
            </div>
            <div class="cj-main-from row">
                <div class="cj-main-from-tree">
                    <div class="m-portlet m-portlet&#45;&#45;full-height m-portlet&#45;&#45;tabs  ">
                        <div class="tab-content">
                            <div id="m_tree_3" class="tree-demo"></div>
                        </div>
                    </div>
                </div>
                <div class="cj-main-from-info">
                    <form id="form" onsubmit="return false">
                        <input name="tree" id="tree" type="hidden"/>
                        <div class="form-group">
                            <label class="col-lg-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                角色名称：
                            </font></font></label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" id="name" name="name" required minlength="2" placeholder="请输入角色名称">
                                <span class="m-form__help"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
														请输入角色名称
													</font></font></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                备注信息：
                            </font></font></label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" id="description" name="description"  minlength="2" required placeholder="请输入备注信息">
                                <span class="m-form__help"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
														请输入备注信息
													</font></font></span>
                            </div>
                        </div>


                        <div class="form-group-last form-group">
                            <label class="col-lg-3 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                状态：
                            </font></font></label>
                            <div class="col-lg-6">
                                <div class="m-checkbox-list">
                                    <label class="m-radio">
                                        <input type="radio"   name="state" value="1" checked><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                        启用
                                    </font></font><span></span>
                                    </label>
                                    <label class="m-radio">
                                        <input type="radio"  name="state" value="2"><font style="vertical-align: inherit;" ><font style="vertical-align: inherit;">
                                        禁用
                                    </font></font><span></span>
                                    </label>

                                </div>
                            </div>
                        </div>
                        <div class="c-m-f-bottom">
                            <button type="submit"  class="btn btn-brand save"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                提交
                            </font></font>
                            </button>
                            <button type="reset" class="btn btn-secondary cancel" onclick="cancel()" ><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                取消
                            </font></font></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="/utils/common_js :: commonJS"></div>
<script th:src="@{/static/js/utils.js}" type="text/javascript"></script>
<script th:src="@{/static/js/ajax.js}" type="text/javascript"></script>
<script th:inline="javascript">

    $("#form").submit(function () {
        roleTree();
        var data = $('#form').serialize();
        formAjax("/admin/sys/saveRoles", data);
    });

    var treeViews = [[${treeView}]];

    var Treeview = {
        init: function () {
            $("#m_tree_3").jstree({
                plugins: ["wholerow", "checkbox", "types"],
                core: {
                    themes: {responsive: !1},
                    data:treeViews
                },
                types: {default: {icon: "fa fa-folder m--font-warning"}, file: {icon: "fa fa-file  m--font-warning"}}
            });
        }
    };

    function roleTree(){
        var ref = $('#m_tree_3').jstree(true);
        var bottom = ref.get_bottom_selected(true);
        var tree = [];
        for (var i = 0; i < bottom.length ; i++) {
            tree.push(bottom[i]["parent"]);
            tree.push(bottom[i]["id"]);
        }
        var newArr = [];
        for(var i =0;i<tree.length;i++){
            if(newArr.indexOf(tree[i]) === -1){
                newArr.push(tree[i]);
            }
        }
        $("#tree").val(newArr);
    }

    jQuery(document).ready(function () {
        Treeview.init();
    });

    function cancel() {
        swal({
            position: "取消",
            type: "warning",
            title: "数据已取消保存！",
            showConfirmButton: 1,
            timer: 1500
        })
    }
</script>
</body>
</html>